<template>
  <div class="article-card-wrapper">
    <div class="title">{{article.title}}</div>

    <div class="article-base-info clearfix">
      <img :src="authorAvatarUrl" alt="Auth">
      <div class="info">
        <h2>{{author.username}}</h2>
        <h3>{{formatPublishDate}} - {{article.read_num}}次阅读</h3>
      </div>
    </div>

    <div id="RTF" class="RTF" ref="RTF"></div>
  </div>
</template>

<script>
  export default {
    props: {
      author: {
        type: Object,
        default: () => ({})
      },
      article: {
        type: Object,
        default: () => ({})
      },
    },
    computed: {
      formatPublishDate() {
        return this.$dateUtils.format(this.article.publish_date, "yyyy-MM-dd");
      },
      authorAvatarUrl() {
        return this.author.avatar
        ? this.$baseURL + this.author.avatar
        : this.$baseURL + this.$defaultAssetUrls.avatar;
      }
    },
    methods: {
      showArticle() {
        this.$refs.RTF.innerHTML = this.article.content;
        this.$emit('renewIndex', this.$refs.RTF);
      },
      getDom() {
        return this.$refs.RTF;
      }
    },
    watch: {
      article() {
        this.showArticle();
      }
    },
  }
</script>

<style lang="less" scoped>
@import url('@/assets/style/RTF.css');
@import url('@/assets/style/hljs.onedark.min.css');

.article-card-wrapper {
  --w: var(--articleCardWidth);
  --fs: calc(var(--w) / 25);
  padding: 0 var(--fs);
  box-sizing: border-box;
  width: var(--w);
  background-color: white;
  min-height: 500px;
  border-radius: 2px;

  .title {
    font-size: var(--fs);
    color: var(--dark);
    font-weight: bold;
    line-height: 2;
  }

  .article-base-info {
    --a: calc(var(--w) * 0.05);
    padding-bottom: calc(var(--a) * 0.4);
    border-bottom: 1px solid var(--gray);

    img, .info {
      float: left;
    }

    img {
      width: var(--a);
      height: var(--a);
      border-radius: 100%;
    }

    .info {
      margin-left: calc(var(--a) * 0.3);

      h2 {
        line-height: calc(var(--a) * 0.6);
        font-size: calc(var(--a) * 0.4);
        color: var(--dark);
      }

      h3 {
        line-height: calc(var(--a) * 0.4);
        font-size: calc(var(--a) * 0.2);
        color: var(--darkGray);
      }
    }
  }

  .article-content {
    padding-top: calc(var(--fs) / 2);
    line-height: 2;
    white-space: pre-wrap;
    text-align: left;
  }

  .RTF {
    width: 100%;
    height: 100%;
  }
}
</style>